<template>
	<view class="container">
		<!-- <button class="avatar-wrapper" style="border: none;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view class="nickname-box">
			<view class="label">
				昵称
			</view>
			<input type="nickname" class="nickname" placeholder="请输入昵称" maxlength="15" :value="nickName"
				@change="getNickname" />
		</view> -->
		<view class="bg">
			<NavigationBar backgroundColor="rgba(0,0,0,0)" :showIcon="false">
				<template #left></template>
				<template></template>
				<template #right></template>
			</NavigationBar>
		</view>
		<view class="user-info" @tap="toInfo">
			<view class="left">
				<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="avatar"></image>
				<image v-else src="https://hr-api.guguzi.com/api/file/download/7iIOBILDAM_noBody.png" mode=""
					class="avatar">
				</image>
				<view class="flex">
					<!-- <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登录</button> -->
					<view class="name">
						{{userInfo.nickName||'微信用户'}}
					</view>
					<u-icon name="arrow-right" color="#444444"></u-icon>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="top">
				<view class="idType">
					视距内驾驶员
				</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="flex">
				<view class="item">
					<view class="">
						累计答题
					</view>
					<view class="num m16">
						120
					</view>
					<view class="tip">
						正确率38%
					</view>
				</view>
				<view class="item">
					<view class="">
						模拟平均分
					</view>
					<view class="num m16">
						1.2
					</view>
					<view class="tip">
						累计考试10次
					</view>
				</view>
				<view class="item">
					<view class="">
						考试通过率
					</view>
					<view class="m16" style="display:flex;align-items: center;">
						<view class="num" style="margin-right: 4rpx;">
							24%
						</view>
						<u-icon name="arrow-upward" color="#F22341" size="50"></u-icon>
					</view>
					<view class="tip">
					    较上次提高4%
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="error" @tap="toMyErrors">
				<image
					src="https://q-api.guguzi.com/api/file/download/ql6g9IWbgy_64d98087-8d6a-4ee8-a748-245be2891a60.png"
					mode="" class="icon">
				</image>
				<view class="title">
					错题集
				</view>
				<view class="num">
					共题
				</view>
			</view>
			<view class="line">
				
			</view>
			<view class="collection" @tap="toMyCollects">
				<image
					src="https://q-api.guguzi.com/api/file/download/fqhDKBBKz9_86c30f22-8e77-49f5-a136-d9668f3fc9e6.png"
					mode="" class="icon">
				</image>
				<view class="title">
					收藏夹
				</view>
				<view class="num">
					共题
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { $http, getAppId, toLogin } from "@/common"
	import NavigationBar from "@/components/NavigationBar/NavigationBar.vue"
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	const userInfo = ref({})
	onLoad(() => {
		
	})
	onShow(() => {
		if (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) {
			userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
		}
	})
	const nickName = ref('')
	const avatarUrl = ref('https://hr-api.guguzi.com/api/file/download/f5rdqmhEOh_noBody.png')
	function getNickname(val) {
		console.log(val, 'nnn')
	}
	function onChooseAvatar(e) {
		avatarUrl.value = e.detail.avatarUrl
	}
	const getPhoneNumber = (e) => {
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			const params = {
				appId: getAppId(),
				code: e.detail.code
			}
			$http.post('getPhoneNumber', params).then(res => {
				console.log(res, '手机号')
			})
		}
	}
	function onSwiperLeft() {
	      console.log('Swiper left')
	}
	function onSwiperRight() {
	      console.log('Swiper right')
	}
	function toInfo(){
		uni.navigateTo({
			url:'/pages/my/info'
		})
	}
	function toMyErrors() {
		uni.navigateTo({
			url: '/pages/home/myErrors?type=0'
		})
	}
	function toMyCollects() {
		uni.navigateTo({
			url: '/pages/home/myErrors?type=1'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #F9F9F9;
		padding: 380rpx 20rpx 0 20rpx;

		.bg {
			position: fixed;
			top: 0;
			width: 100%;
			height: 180px;
			overflow: hidden;
			z-index: 99;
		}

		.bg:after {
			width: 180%;
			height: 180px;
			position: absolute;
			left: -40%;
			top: 0;
			z-index: -1;
			content: "";
			border-radius: 0 0 50% 50%;
			background: #EFF9FE;
			backface-visibility: hidden;
			transform: translateZ(0);
		}

		.user-info {
			margin-bottom: 20rpx;
			position: fixed;
			width: 100%;
			top: 76px;
			z-index: 99;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			color: #444444;

			.left {
				display: flex;
				align-items: center;
			}

			.flex {
				display: flex;
				align-items: center;
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.name {
				font-size: 32rpx;
			}

			.code {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.box {
			background-color: #fff;
            padding: 20rpx;
			.top {
				display: flex;
				align-items: center;
                font-weight: bold;
				margin-bottom: 26rpx;
				.idType {
					margin-right: 10rpx;
				}
			}
			.flex{
				display: flex;
				justify-content: space-between;
				.item{
					.m16{
						margin: 16rpx 0;
					}
					.num{
						color: #4082FC;
						font-size: 40rpx;
						font-weight: bold;
					}
					.tip{
						color: #696969;
						font-size: 24rpx;
					}
				}
			}
		}
		.section{
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			margin: 20rpx 0;
			.error{
				display: flex;
				align-items: center;
				flex: 1;
				.icon{
					width: 60rpx;
					height: 60rpx;
				}
				.title{
					font-size: 32rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}
				.num{
					color: #778899;
					font-size: 24rpx;
				}
			}
			.line{
				width: 1rpx;
				height: 50rpx;
				background-color: #F5F5F5;
			}
			.collection{
				display: flex;
				align-items: center;
				flex: 1;
				padding-left: 20rpx;
				.icon{
					width: 60rpx;
					height: 60rpx;
				}
				.title{
					font-size: 32rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}
				.num{
					color: #778899;
					font-size: 24rpx;
				}
			}
		}
	}
</style>